<template>
    <div class="center_div">
        <div class="searchForm searchFormDataManageBtn22px" style="margin-top: 1%;margin-left: 1%;">
            <el-form :inline="true" class="demo-form-inline">
                <el-form-item label="坐席名称">
                    <el-input v-model="name"></el-input>

                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="querySearch" class="dataManageBtn22BtnpPx">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="table-wrap">
            <el-table
                    :data="dataWithPage"
                    style="width:100%;text-align: center;"
                    border
                    cell-class-name="dataManage18px"
                    :header-cell-style="headerCellClassName">
                <el-table-column align="center" v-for="title in tableTitle" :prop="title.prop" :label="title.label"
                                 :show-overflow-tooltip="title.overflowTooltip">
                </el-table-column>
                <el-table-column align="center" label="是否启用"
                >
                    <template v-slot="agintStatus">
                        <span v-if="agintStatus.row.isStart == 1" style="color: green">  已启用 </span>
                        <span v-else> 未启用 </span>

                    </template>
                </el-table-column>
                <template v-if="buttons && buttons.length!==0">
                    <el-table-column
                            class="align-right"
                            width="250px"
                            header-align="center"
                            label="操作"
                            align="center">
                        <template slot-scope="scope">
                            <el-button @click="handleEdit(scope.row)"
                                       class="el-button el-button--text dataManageBtn22px">编辑
                            </el-button>
                        </template>
                    </el-table-column>
                </template>
            </el-table>
            <el-pagination
                    class="dataManage18px"
                    layout="total,prev, pager, next"
                    background
                    @current-change="changePageNum"
                    :current-page="pageNum"
                    :page-size="pageSize"
                    :total="limit.length">
            </el-pagination>
        </div>
        <div>
            <el-dialog title="编辑坐席"
                       :visible.sync="showBox"
                       width="50%"
                       @close="closeDialog"
                       append-to-body>
                <el-form ref="form" :model="form" :rules="rules" label-width="180px">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="坐席ID">
                                <el-select v-model="form.agentId" placeholder="请选择" disabled>
                                    <el-option
                                            v-for="item in AgentsArray"
                                            :key="item.id"
                                            :label="item.name"
                                            :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" >
                            <el-form-item label="" prop="agent_name">
                                <template v-if="form.agentId>105">
                                    <el-input v-model="form.otherPlat" disabled></el-input>
                                </template>
                                <template v-else>
                                    <el-input v-model="form.aocPlat" disabled></el-input>
                                </template>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="22">
                            <el-form-item label="坐席名称" prop="agent_name">
                                <el-input v-model="form.agent_name" clearable></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row v-if="form.isStart == 1">
                        <el-col :span="22">
                            <el-form-item label="地址" prop="address">
                                <el-input v-model="form.address"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="22">
                            <el-form-item label="是否启用" prop="isStart">
                                <el-select v-model="form.isStart"
                                           placeholder="请选择"
                                >
                                    <el-option
                                            label="启用"
                                            :value="1">
                                    </el-option>
                                    <el-option
                                            label="未启用"
                                            :value="0">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row  v-if="form.isStart == 1">
                        <el-col :span="24">
                            <el-form-item label="是否安装客户端" prop="isStart">
                                <el-select v-model="form.ifEquippedPlatform"
                                           placeholder="请选择"
                                >
                                    <el-option
                                            label="是"
                                            :value="1">
                                    </el-option>
                                    <el-option
                                            label="否"
                                            :value="0">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="22" v-if="form.ifEquippedPlatform == 1 && form.isStart == 1">
                            <el-form-item label="话机号码" prop="leftExt">
                                <el-select v-model="form.leftExt" placeholder="请选择">
                                    <el-option
                                            v-for="item in SIPZD201Array"
                                            :key="item.subscriber_id"
                                            :label="item.name"
                                            :value="item.extNumber">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="22" v-if="form.ifEquippedPlatform == 0 && form.isStart == 1">
                            <el-form-item label="话机号码" prop="leftExt">
                                <el-select v-model="form.leftExt" placeholder="请选择">
                                    <el-option
                                            v-for="item in NDDHORGHZDArray"
                                            :key="item.subscriber_id"
                                            :label="item.name"
                                            :value="item.extNumber">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>

                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="showBox = false" class="dataManageBtn22BtnpPx">取 消</el-button>
                    <el-button type="primary" @click="comfirmUpdate" class="dataManageBtn22BtnpPx">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
  import AgentsArray from '../../views/agents';
  import RoleManage from '@/api/dataManages/RoleManage';
  import UserManage from '@/api/dataManages/UserManage';
  import SeatConfigurationApi from '@/api/dataManages/SeatConfigurationApi';
  import {mapActions} from 'vuex';
  import AgentApi from '../../api/AgentApi';
  import {DispatchCtrlLib} from '../../chromeLib/DispatchCtrlLib';
  import HomeApi from '../../api/HomeApi';

  export default {
    name: 'RoleManage',
    props: {
      FleetId: Number,
      userId: Number,
    },
    data() {
      return {
        AgentsArray: [
          //分机号状态  //String	0-离线 1-空闲 2-回铃中 3-响铃中 4-呼叫中
          {
            id: 1,
            number: '5120',//A1-1分机号,
            status: 0,
            ExtenName: 'wxq01',
            name: 'C15', sortId: 15,
          },
          {
            id: 2,
            number: '5208',//A1-1分机号,
            status: 0,
            ExtenName: 'llctest',
            name: 'C16', sortId: 16,
          }, {
            id: 3,
            number: '5206',//A1-1分机号,
            status: 0,
            ExtenName: 'dwinner',
            name: 'C08', sortId: 8,
          },
          {
            id: 4,
            number: '5204',//话机1
            status: 0,
            ExtenName: '话机1',
            name: 'C09', sortId: 9,
          },
          {
            id: 5,
            number: '5205',//话机2
            status: 0,
            ExtenName: '话机2',
            name: 'C01', sortId: 1,
          }, {
            id: 6,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'C02', sortId: 2,
          },
          {
            id: 7,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'C17', sortId: 17,
          },
          {
            id: 8,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'C18', sortId: 18,
          },
          {
            id: 9,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'C19', sortId: 19,
          },
          {
            id: 10,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'C20', sortId: 20,
          }, {
            id: 11,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'C21', sortId: 21,
          }, {
            id: 12,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'C10', sortId: 10,
          }, {
            id: 13,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'C11', sortId: 11,
          }, {
            id: 14,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'C12', sortId: 12,
          }, {
            id: 15,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'C13', sortId: 13,
          }, {
            id: 16,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'C14', sortId: 14,
          }, {
            id: 17,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'C03', sortId: 3,
          }, {
            id: 18,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'C04', sortId: 4,
          }, {
            id: 19,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'C05', sortId: 5,
          }, {
            id: 20,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'C06', sortId: 6,
          }, {
            id: 21,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'C07', sortId: 7,
          }, {
            id: 22,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'D16',
            sortId: 16,
          }, {
            id: 23,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'D17',
            sortId: 17,
          }, {
            id: 24,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'D18',
            sortId: 18,
          }, {
            id: 25,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'D19',
            sortId: 19,
          }, {
            id: 26,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'D20',
            sortId: 20,
          }, {
            id: 27,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'D08',
            sortId: 8,
          }, {
            id: 28,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'D09',
            sortId: 9,
          }, {
            id: 29,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'D10',
            sortId: 10,
          }, {
            id: 30,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'D12',
            sortId: 12,
          }, {
            id: 31,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'D13',
            sortId: 13,
          }, {
            id: 32,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'D01',
            sortId: 1,
          }, {
            id: 33,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'D02',
            sortId: 2,
          }, {
            id: 34,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'D03',
            sortId: 3,
          }, {
            id: 35,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'D04',
            sortId: 4,
          }, {
            id: 36,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'D05', sortId: 5,
          }, {
            id: 37,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'D21', sortId: 21,
          }, {
            id: 38,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'D22', sortId: 22,
          }, {
            id: 39,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'D14', sortId: 14,
          }, {
            id: 40,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'D15', sortId: 15,
          }, {
            id: 41,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'D06', sortId: 6,
          }, {
            id: 42,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'D07', sortId: 7,
          }, {
            id: 43,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'B24', sortId: 24,
          }, {
            id: 44,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'B25', sortId: 25,
          }, {
            id: 45,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'B26', sortId: 26,
          }, {
            id: 46,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'B27', sortId: 27,
          }, {
            id: 47,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'B28', sortId: 28,
          }, {
            id: 48,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'B29', sortId: 29,
          }, {
            id: 49,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'B23', sortId: 23,
          }, {
            id: 50,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'B22', sortId: 22,
          }, {
            id: 51,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'B21', sortId: 21,
          }, {
            id: 52,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'B20', sortId: 20,
          }, {
            id: 53,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'B19', sortId: 19,
          }, {
            id: 54,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'B18', sortId: 18,
          }, {
            id: 55,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'B30', sortId: 30,
          }, {
            id: 56,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'B01', sortId: 1,
          }, {
            id: 57,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'B17', sortId: 17,
          }, {
            id: 58,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'B16', sortId: 16,
          }, {
            id: 59,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'B15', sortId: 15,
          }, {
            id: 60,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'B14', sortId: 14,
          }, {
            id: 61,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'B02', sortId: 2,
          }, {
            id: 62,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'B03', sortId: 3,
          }, {
            id: 63,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'B04', sortId: 4,
          }, {
            id: 64,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'B05', sortId: 5,
          }, {
            id: 65,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'B06', sortId: 6,
          }, {
            id: 66,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'B07', sortId: 7,
          }, {
            id: 67,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'B08', sortId: 8,
          }, {
            id: 68,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'B13', sortId: 13,
          }, {
            id: 69,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'B12', sortId: 12,
          }, {
            id: 70,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'B11', sortId: 11,
          }, {
            id: 71,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'B10', sortId: 10,
          }, {
            id: 72,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'B09', sortId: 9,
          }, {
            id: 73,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'A18', sortId: 18,
          }, {
            id: 74,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'A19', sortId: 19,
          }, {
            id: 75,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'A20', sortId: 20,
          }, {
            id: 76,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'A21', sortId: 21,
          }, {
            id: 77,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'A12', sortId: 12,
          }, {
            id: 78,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'A13', sortId: 13,
          }, {
            id: 79,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'A14', sortId: 14,
          }, {
            id: 80,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'A01', sortId: 1,
          }, {
            id: 81,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'A02', sortId: 2,
          }, {
            id: 82,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'A03',
            sortId: 3,
          }, {
            id: 83,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'A04', sortId: 4,
          }, {
            id: 84,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'A22', sortId: 22,
          }, {
            id: 85,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'A23', sortId: 23,
          }, {
            id: 86,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'A24', sortId: 24,
          }, {
            id: 87,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'A25', sortId: 25,
          }, {
            id: 88,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'A26', sortId: 26,
          }, {
            id: 89,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'A27', sortId: 27,
          }, {
            id: 90,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'A28', sortId: 28,
          }, {
            id: 91,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'A29', sortId: 29,
          }, {
            id: 92,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'A05', sortId: 5,
          }, {
            id: 93,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'A06', sortId: 6,
          }, {
            id: 94,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'A07', sortId: 7,
          }, {
            id: 95,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'A30', sortId: 30,
          }, {
            id: 96,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'A31', sortId: 31,
          }, {
            id: 97,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'A32', sortId: 32,
          }, {
            id: 98,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'A33', sortId: 33,
          }, {
            id: 99,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'A15', sortId: 15,
          }, {
            id: 100,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'A16', sortId: 16,
          }, {
            id: 101,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'A17', sortId: 17,
          }, {
            id: 102,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'A08', sortId: 8,
          }, {
            id: 103,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'A09', sortId: 9,
          }, {
            id: 104,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'A10', sortId: 10,
          }, {
            id: 105,
            number: '',
            status: 0,
            ExtenName: '',
            name: 'A11', sortId: 11,
          },

        ],
        name: '',
        AgentIdArray: AgentsArray,
        rules: {
          agentId: [
            {required: false, message: '请输入坐席ID', trigger: 'blur'},
          ],
          agent_name: [
            {required: true, message: '请输入坐席名称', trigger: 'blur'},
            {min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: 'blur'},
          ], leftExt: [
            {required: true, message: '请选择绑定座机号', trigger: 'change'},
          ], address: [
            {required: true, message: '请输入地址', trigger: 'blur'},
            {min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: 'blur'},
          ],
          isStart: [
            {required: true, message: '请选择是否启用', trigger: 'change'},
          ],
        },
        tableTitle: [
          {label: '坐席ID', prop: 'name', overflowTooltip: true},
          {label: '坐席名称', prop: 'agent_name', overflowTooltip: true},
          {label: '绑定座机号', prop: 'leftExt', overflowTooltip: true},
          {label: '地址', prop: 'address', overflowTooltip: true},
          // {label: '是否启用', prop: 'isStart',slot:'agintStatus' ,overflowTooltip: true},
        ],
        tableData: [],
        total: 0,
        type: 0,
        pageNum: 1,
        pageSize: 8,
        buttons: [{label: '编辑', href: 'update'}],
        showBox: false,
        loadingGrp: false,
        showAdd: true,
        title: '',
        leftextNumberArray: [],
        sipZDId: '',
        form: {
          agentId: '',
          agent_name: '',
          address: '',
          leftExt: '',
          isStart: 1,
          ifEquippedPlatform: 0,
          aocPlat: "AOC台席",
          otherPlat: "非AOC台席",
        },
        roleOptions: [],
        authorityGrpOptions: [],
        stateAllSubTypeObj: {
          pocID: 1,  //POC终端  1 1
          GotaID: 1,  //Gota终端 1 2
          QchatID: 1,  //Qchat终端 1 3
          DMRID: 1,  //DMR终端 1 4

          SIPZD: 1,  //RTMP源 5 1
          RTMPSPY: 1,  //监控终端 5 2
          BKQSDK: 1,  //布控球(SDK) 5 3
          BKQGBT28181: 1,  //布控球(GBT28181) 5 4
          WRJGBT28181: 1,  //无人机(GBT28181) 5 5
          HWSXT: 1,  //红外摄像头 5 6

          MNLWG: 1,  //模拟类网关 10 1
          DMRCT: 1,  //DMR 车台 10 2

          SIPZD201: 1,  //SIP终端 20 1
          NDDH202: 1,  //内调电话 20 2  内通电话
          GHZD203: 1,  //固话终端 20 3   固话电话

          SPWG: 1,  //视频网关 21 1
          DMRWG: 1,  //语音网关 21 2
          DNRZJT: 1,  //DMR中继台 21 3

        },
        //sip终端
        SIPZD201Array: [],
        //内通电话以及固话电话
        NDDHORGHZDArray: [],

      };
    },
    created() {
      this.changeDmgPage();
    },
    mounted: function() {
      this.query();
    },
    computed: {
      limit() {
        let data = [...this.tableData];
        return data;
      },
      dataWithPage() {
        const data = this.limit;
        const start = this.pageNum * this.pageSize - this.pageSize;
        const end = start + this.pageSize;
        return [...data].slice(start, end);
      },
    },
    watch: {
      remarkA(val) {
        if (val.length > 100) {
          this.$message.error('描述不能超过100位字符');
          this.form.remark.substring(0, 100);
        }
      },
    },
    methods: {
      test() {
        console.log();
        this.getLocalUrlCs();
      },
      getLocalUrlCs() {
        let localHref = 'http://192.168.0.209:1603/Airport/index.html#/home?ip=192.168.0.209&userId=llc&LocalIP=192.168.0.121';

        // let localHref = window.location.href;
        let urlArray = localHref.split('?')[1].split('&');	//以'?'为分割进行截取 [0]是网站域名，[1]是网站所带参数
        console.log('LocalIP:' + urlArray[3]);
        console.log(urlArray);
        let obj = {
          LocalIP: urlArray[3],
        };
        return obj;
      },
      /**
       * 获取sip终端 左话机
       */
      getSipLeftExtNumber() {
        UserManage.getFleetSubByType(
            {
              fleetId: this.FleetId,
              subType: this.stateAllSubTypeObj.SIPZD201,
            },
        ).then(res => {
          // 返回数据
          if (res.obj.list.length > 0) {
            this.SIPZD201Array = res.obj.list;
          }
        }).catch(err => {
          // 异常情况
          console.log(err);
        });
      },
      /**
       * 获取内通电话 左话机
       */
      getNDDH202LeftExtNumber() {
        UserManage.getFleetSubByType(
            {
              fleetId: this.FleetId,
              subType: this.stateAllSubTypeObj.NDDH202,
            },
        ).then(res => {
          // 返回数据
          if (res.obj.list.length > 0) {
            this.NDDHORGHZDArray = res.obj.list;
            this.getGHZD203LeftExtNumber();
          }

        }).catch(err => {
          // 异常情况
          console.log(err);
        });
      },
      /**
       * 获取固话电话 左话机
       */
      getGHZD203LeftExtNumber() {
        UserManage.getFleetSubByType(
            {
              fleetId: this.FleetId,
              subType: this.stateAllSubTypeObj.GHZD203,
            },
        ).then(res => {
          // 返回数据
          if (res.obj.list.length > 0) {
            this.NDDHORGHZDArray = this.NDDHORGHZDArray.concat(res.obj.list);
          }
        }).catch(err => {
          // 异常情况
          console.log(err);
        });
      },
      //获取左话机号
      getLeftExtNumber() {
        /* UserManage.getFleetSubByType(
             {
               fleetId: this.FleetId,
               subType: this.sipZDId,
             },
         ).then(res => {
           // 返回数据
           if (res.obj.list.length > 0) {
             this.leftextNumberArray = res.obj.list;
           }
         }).catch(err => {
           // 异常情况
           console.log(err);
         });*/
        this.getSipLeftExtNumber();
        this.getNDDH202LeftExtNumber();
      },
      queryAllSubTypes() {
        HomeApi.queryAllSubType({}).then(res => {
          if (res.success) {
            let checkDatas = res.obj.list;
            let len = checkDatas.length;
            for (let i = 0; i < len; i++) {
              if (checkDatas[i].Type_ID == '20' && checkDatas[i].Sub_type_id == '1') {
                this.stateAllSubTypeObj.SIPZD201 = checkDatas[i].ID;//sip终端
              } else if (checkDatas[i].Type_ID == '20' && checkDatas[i].Sub_type_id == '2') {
                this.stateAllSubTypeObj.NDDH202 = checkDatas[i].ID;//内通电话
              } else if (checkDatas[i].Type_ID == '20' && checkDatas[i].Sub_type_id == '3') {
                this.stateAllSubTypeObj.GHZD203 = checkDatas[i].ID;//固话电话
              }
            }
            this.getLeftExtNumber();
          }
        }).catch(err => {
          // 异常情况
          console.log(err);
        });
      },
      //获取坐席编号
      queryFreeAOC() {

        UserManage.queryFreeAOC({}).then(res => {
          // 返回数据
          if (res.success) {
            let resData = res.obj.list;
            let agents = this.AgentsArray;
            let data = [
              {
                agent_id: this.form.agentId,
              },
            ];

            for (let a = 0; a < resData.length; a++) {
              let obj = {
                agent_id: parseInt(resData[a].agent_id),
              };
              data.push(obj);
            }
            let temArray = [];
            for (let j = 0; j < agents.length; j++) {
              for (let i = 0; i < data.length; i++) {
                if (data[i].agent_id === agents[j].id) {
                  let obj = {
                    // id:parseInt(agents[j].id),
                    sortId: agents[j].sortId,
                    name: agents[j].name,
                    agentId: agents[j].id,
                  };
                  temArray.push(obj);
                }
              }
            }
            console.log('temArray');
            console.log(temArray);
            let sortDataA = [];
            let sortDataB = [];
            let sortDataC = [];
            let sortDataD = [];
            let changeData = [...temArray];
            for (let k = 0; k < changeData.length; k++) {
              if (RegExp(/A/).exec(changeData[k].name)) {
                sortDataA.push(changeData[k]);
              } else if (RegExp(/B/).exec(changeData[k].name)) {
                sortDataB.push(changeData[k]);
              } else if (RegExp(/C/).exec(changeData[k].name)) {
                sortDataC.push(changeData[k]);
              } else if (RegExp(/D/).exec(changeData[k].name)) {
                sortDataD.push(changeData[k]);
              }
            }

            function compare(key) {
              return function(value1, value2) {
                var val1 = value1[key];
                var val2 = value2[key];
                return val1 - val2;
              };
            }

            sortDataA.sort(compare('sortId'));
            sortDataB.sort(compare('sortId'));
            sortDataC.sort(compare('sortId'));
            sortDataD.sort(compare('sortId'));
            let objA = {
              label: '热门城市',
              options: sortDataA,
            };
            let objB = {
              label: '热门城市',
              options: sortDataA,
            };
            let objC = {
              label: '热门城市',
              options: sortDataA,
            };
            let objD = {
              label: 'D区',
              options: sortDataA,
            };

            this.AgentIdArray = [...sortDataA, ...sortDataB, ...sortDataC, ...sortDataD];
            this.tableData = [...sortDataA, ...sortDataB, ...sortDataC, ...sortDataD];

            //TODO 可分组，或者下拉分组
            let AgentIdArrayGroup = [
              {
                label: 'A区域',
                options: [...sortDataA],
              }, {
                label: 'B区域',
                options: [...sortDataB],
              }, {
                label: 'C区域',
                options: [...sortDataC],
              }, {
                label: 'D区域',
                options: [...sortDataD],
              },
            ];
            console.log('选项数据');
            console.log(this.AgentIdArray);
          }
        }).catch(err => {

        });
      },
      querySearch() {
        this.query(1);
        this.pageNum = 1;
      },
      comfirmUpdate() {
        var validate = false;
        this.$refs['form'].validate((valid) => {
          if (valid) {
            validate = true;
          } else {
            console.log('error submit!!');
            validate = false;
            return false;
          }
        });
        if (validate === false) {
          return;
        }
        let data = {
          agentId: this.form.agentId,//坐席ID
          agent_name: this.form.agent_name,//坐席名称
          address: this.form.address,//地址
          leftExt: this.form.leftExt,//绑定座机号
          isStart: this.form.isStart,//是否启用
          // user_id:this.form.user_id,//是否启用
          //ifEquippedPlatform
        };
        if(this.form.ifEquippedPlatform ==1){//配备统一通信平台
        }else{ //未配备统一通信平台

        }
        AgentApi.updateUserAgent(data).then(res => {
          if (res.success) {
            if (res.obj == 1) {
              this.$message.success('修改成功');
              this.query(1);
              this.showBox = false;
            } else {

            }
          } else {
            if (res.obj == 2) {
              this.$message.error('地址已存在！');
            } else {

            }
          }
        }).catch(err => {
          // 异常情况
          console.log(err);

        });

      },
      changeDmgPage() {
        let w = window.screen.width;
        let h = window.screen.height;
        if (w == 1920) {
          if (h == 1080) {
          } else {
            this.pageSize = 11;
          }
        }
      },
      //表头样式
      headerCellClassName() {
        return 'font-size:18px;color:#515A6E;padding:10px 0px 10px 0px !important;background:#F5F5F6;border:1px solid #EBEBEB';
      },
      //表格样式
      cellStyleClassName() {
        return 'font-size:13px;text-align:center;color:#606266;padding:5px 0px 5px 0px !important;border:1px solid #EBEBEB';
      },
      closeDialog() {
        /* this.form.agentId = ''
         this.form.agent_name =  '';
         this.form.leftExt =  '';
         this.form.address =  '';
         this.form.isStart =  '';
         this.form.user_id =  '';*/
        this.$nextTick(function() {
          this.$refs['form'].resetFields();
        });
      },
      handleEdit(item) {
        console.log(item);
        this.queryAllSubTypes();
        this.form.agentId = parseInt(item.agentId);
        this.form.agent_name = item.agent_name;
        this.form.leftExt = item.leftExt;
        this.form.address = item.address;
        this.form.isStart = item.isStart;
        this.form.user_id = item.user_id;

        this.showBox = true;

      },
      comfirm() {
        if (this.type === 0) {
          this.updateRole();
        } else {
          this.addRole();
        }
      },
      formClear: function() {
        this.form.ID = '';
        this.form.NAME = '';
        this.form.SEQ = '';
        this.form.PID = '';
        this.form.REMARK = '';
      },
      //vuex获取store中方法
      ...mapActions('user', ['chageGlobalUserRoles']),
      query(pageNum) {
        console.log(this.NDDHORGHZDArray);

        var data = {
          agent_name: this.name || '',
          // userId: 1019,
          fleetId: this.FleetId,
          pageNum: pageNum || this.pageNum,
          pageSize: this.pageSize,
        };
        //坐席状态处理
        AgentApi.queryAgent(data).then(res => {
          // 返回数据
          if (res.obj.length > 0) {
            // this.tableData = res.obj;
            let data = res.obj;
            let agents = this.AgentsArray;
            let temArray = [];
            for (let j = 0; j < agents.length; j++) {
              for (let i = 0; i < data.length; i++) {
                if (data[i].agent_id === agents[j].id) {
                  let obj = {
                    // id:parseInt(agents[j].id),
                    sortId: agents[j].sortId,
                    name: agents[j].name,
                    leftExt: data[i].leftExt,
                    agent_name: data[i].agent_name,
                    isStart: data[i].isStart,
                    agentId: agents[j].id,
                    address: data[i].address,
                    user_id: data[i].user_id,
                  };
                  temArray.push(obj);
                }
              }
            }
            let sortDataA = [];
            let sortDataB = [];
            let sortDataC = [];
            let sortDataD = [];
            let changeData = [...temArray];
            for (let k = 0; k < changeData.length; k++) {
              if (RegExp(/A/).exec(changeData[k].name)) {
                sortDataA.push(changeData[k]);
              } else if (RegExp(/B/).exec(changeData[k].name)) {
                sortDataB.push(changeData[k]);
              } else if (RegExp(/C/).exec(changeData[k].name)) {
                sortDataC.push(changeData[k]);
              } else if (RegExp(/D/).exec(changeData[k].name)) {
                sortDataD.push(changeData[k]);
              }
            }

            function compare(key) {
              return function(value1, value2) {
                var val1 = value1[key];
                var val2 = value2[key];
                return val1 - val2;
              };
            }

            sortDataA.sort(compare('sortId'));
            sortDataB.sort(compare('sortId'));
            sortDataC.sort(compare('sortId'));
            sortDataD.sort(compare('sortId'));
            this.tableData = [...sortDataA, ...sortDataB, ...sortDataC, ...sortDataD];

            console.log(this.tableData);
          } else {
            this.tableData = [];
          }

        }).catch(err => {
          console.log('监听异常');
          // 异常情况
        });
      },
      closeBox: function() {
        this.showBox = false;
      },
      changePageNum: function(val) {
        this.pageNum = val;
        this.query();
      },
    },
  };
</script>

<style scoped>
    .el-dialog__body {
        /*height: 30vh;*/
        overflow: auto;
    }

    /deep/ .el-form-item__label {
        font-size: 22px !important;
    }

    /deep/ .el-input__inner {
        font-size: 22px !important;
    }

    /deep/ .el-dialog__title {
        font-size: 22px;
    }

    /deep/ .el-icon-close:before {
        font-size: 25px;
    }

    /*分页修改开始*/
    .el-pagination /deep/ .el-pagination__total {
        font-size: 20px;
        line-height: 60px;
    }

    .el-pagination /deep/ button /deep/ .el-icon .el-icon .el-icon-arrow-left {
        font-size: 50px;
        height: 60px;
        width: 40px;
    }

    /deep/ .el-pager li {
        margin-top: 15px;
        height: 60px;
        width: 60px;
        line-height: 60px;
        font-size: 18px;
    }

    /deep/ .el-pagination.is-background .btn-prev, .el-pager li {
        height: 60px;
        width: 60px;
    }

    /deep/ .el-pagination.is-background .btn-next, .el-pager li {
        height: 60px;
        width: 60px;
    }

    /deep/ .el-pagination .btn-prev .el-icon {
        font-size: 40px;
    }

    /deep/ .el-pagination .btn-next .el-icon {
        font-size: 40px;
    }

    /*分页修改结束*/
    @media (max-width: 1366px) {
        #roleManage .table-wrap {
            height: 800px !important;
            overflow: auto;
        }
    }

    .table-wrap {
        height: 1000px;
        overflow: auto;
    }

    .searchFormBtn {
        margin-left: 5px;
        display: inline-block;
    }
</style>
